<template>
  <div class="tabmt20">
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :class="{ tableHeight: tableData.length == 0 }" border>
      <el-table-column label="审批节点编码" prop="activityId" show-overflow-tooltip></el-table-column>
      <el-table-column label="节点名称" prop="activityName" show-activityName-tooltip></el-table-column>
      <el-table-column label="操作人" prop="assigneeName" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.assigneeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批结果" prop="approveType" show-overflow-tooltip>
        <template #default="scope">
          <div class="lincz">
            <el-button type="" link>{{ scope.row.approveState }}</el-button>
            <el-button type="info" v-if="scope.row.assigneeNameListLength > 1" link @click="drawerShow(scope.$index, scope.row)">详情</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审批意见" prop="comment" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作时间" prop="operateTime" show-overflow-tooltip></el-table-column>
    </el-table>
    <base-drawer
      :drawer="drawerObj.drawer"
      :direction="drawerObj.direction"
      :isCloseDrawer="drawerObj.isCloseDrawer"
      :showClose="drawerObj.showClose"
      :drawerType="drawerObj.drawerType"
      :size="drawerObj.size"
      :title="drawerObj.title"
    >
      <template v-slot:headerBtn>
        <el-button type="info" @click="drawerObj.drawer = false">关闭</el-button>
      </template>
      <template v-slot:content>
        <div class="demo-drawer__content">
          <el-form ref="drawerformRef" :model="drawerform" label-position="left">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="审批模式：" prop="approveType">
                  {{ drawerform.approveType }}
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="drawerform.ratio">
                <el-form-item label="通过比例：" prop="ratio">
                  <span>{{ drawerform.ratio ? drawerform.ratio * 100 : 0 }}</span
                  >%
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table
            ref="drawermultipleTable"
            :data="drawerTableData"
            tooltip-effect="dark"
            :class="{ tableHeight: drawerTableData.length == 0 }"
            border
          >
            <el-table-column label="操作人" prop="aggigneeName" show-overflow-tooltip></el-table-column>
            <el-table-column label="审批动作" prop="approveResult" show-overflow-tooltip>
              <template #default="scope">
                {{
                  scope.row.approveResult == 1
                    ? '审批通过'
                    : scope.row.approveResult == 2
                    ? '审批拒绝'
                    : scope.row.approveResult == 3
                    ? '终止流程'
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="审批意见" prop="comment" show-overflow-tooltip> </el-table-column>
            <el-table-column label="操作时间" prop="operateTime" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </template>
    </base-drawer>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import baseDrawer from 'components/base-drawer'

const drawerObj = reactive({
  drawer: false,
  direction: 'rtl',
  isCloseDrawer: false,
  showClose: false,
  drawerType: 2,
  size: '744px',
  title: '审批结果详情'
})

const props = defineProps({
  tableData: {
    type: Array,
    default() {
      return []
    }
  }
})
const drawer_falg = ref(false)
const drawerform = reactive({
  approveType: '',
  ratio: 0
})
const drawerTableData = ref([])

onMounted(() => {})
const drawerShow = (index, row) => {
  drawerform.ratio = row && row.ratio != 'null' ? Number(row.ratio) : 0
  drawerform.approveType = row.approveType || ''
  drawerTableData.value = row.recordDetail || []
  drawerObj.drawer = true
}
</script>

<style lang="scss" scoped>
.tabmt20 {
  margin-top: 10px;
}
</style>
